<template>
  <div style="padding: 12px;">
    <el-row :gutter="24">
      <!-- 用户操作 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>用户信息</span>
            <el-button v-if="!isLogin" style="float: right;" type="primary" @click="onLogin">登录</el-button>
            <el-button v-else type="danger" style="float: right;" @click="onExit()">退出登录</el-button>
            <el-divider></el-divider>
          </div>
          <el-form v-if="!isLogin" :inline="true" :model="formInline">
            <el-form-item label="token">
              <el-input v-model="formInline.user" placeholder="请输入token"></el-input>
            </el-form-item>
          </el-form>
          <el-descriptions title="用户信息" v-else>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>

          </el-descriptions>
        </el-card>
      </el-col>
      <!-- 地区选择 -->
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <span>城市选择</span>
            <el-divider></el-divider>
          </div>
          <el-form :model="chooseCityInfo" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-row :gutter="24">
              <el-col :span="10">
                <el-form-item label="城市" prop="cityName">
                  <el-select v-model="cityName" filterable allow-create default-first-option placeholder="请选择城市">
                    <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="店铺" prop="shopName">
                  <el-select v-model="cityName" filterable allow-create default-first-option placeholder="请选择搜索的店铺">
                    <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <!-- 店铺信息 -->
    <el-card>
      <div slot="header">
        <span>店铺信息</span>
        <el-divider></el-divider>
      </div>
      <!-- 商品分类 横向滚动 -->
      <el-card>
        <el-scrollbar>
          <el-tag style="cursor: pointer;margin-right: 20px;" @click="onClickTag(index)"
            v-for="(productCategory, index) in productCategoryList" :key="productCategory.name"
            :type="chooseProductCategoryIndex === index ? 'success' : productCategory.type">
            {{ productCategory.name }}
          </el-tag>
        </el-scrollbar>
      </el-card>
      <el-divider></el-divider>
      <el-table :data="store_product_category_list" style="width: 100%" max-height="250">
        <el-table-column fixed prop="goods_id" label="商品id" width="150">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名" width="120">
        </el-table-column>
        <el-table-column prop="goods_img" label="商品图片">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="120">
        </el-table-column>
        <el-table-column prop="goods_desc" label="商品描述" width="300">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="test()">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

</template>

<script setup lang="ts">
defineOptions({
  name: "bwcj",
});

import { reactive, toRefs } from "vue";

const chooseCityInfo = reactive({
  cityName: "",
  shopName: "",
});

const formInline = reactive({
  user: "",
  region: "",
});


const store_product_category_list = reactive([
  {
    goods_id: 1,
    goods_name: "iphone",
    goods_img: "https://picsum.photos/200/300",
    goods_price: 1000,
    goods_desc: "iphone 13 pro",
  },
  {
    goods_id: 2,
    goods_name: "iphone",
    goods_img: "https://picsum.photos/200/300"
  }
])

const productCategoryList = reactive([
  {
    name: "手机",
    type: "info",
  },
  {
    name: "电脑",
    type: "info",
  },
  {
    name: "电脑",
    type: "info",
  },
  {
    name: "电脑",
    type: "info",
  },
  {
    name: "电脑",
    type: "info",
  }
])

// input3 select都是单独的
const input3 = ref("");
const cityName = ref("");


const test = () => {

}



// 登录成功的flag
const isLogin = ref(false);

const loading = ref(false)

const cityList: any = ref([])

function onLogin() {
  console.log("submit!");

  isLogin.value = true
}

function onExit() {
  isLogin.value = false
}

const remoteMethod = (e: any) => {
  loading.value = true;
  setTimeout(() => {
    cityList.value = [
      {
        value: "上海",
        label: "上海",
      },
      {
        value: "苏州",
        label: "苏州",
      },
      {
        value: "无锡",
        label: "无锡",
      },
      {
        value: "南京",
        label: "南京",
      },
      {
        value: "杭州",
        label: "杭州",
      }
    ]
  }, 2000);
}

const chooseProductCategoryIndex = ref(0)


const onClickTag = (index: number) => {
  chooseProductCategoryIndex.value = index
}
</script>
